<template>
  <div class="order">
    <HeaderTop title="订单列表"></HeaderTop>
    <div class="order-not-login">
      <img src="./images/sn-cart-empty.png" />
      <h3>请登录后查看订单</h3>
      <button class="order-login-btn">立即登录</button>
    </div>
  </div>
</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop"
export default {
  name: "Order",
  components: { HeaderTop },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.order-not-login {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  margin-top: 4.5rem;
  padding-top: 10rem;
  img {
    width: 10rem;
    height: 10rem;
  }
  h3 {
    margin: 2rem 0;
    font-size: 1.5rem;
    font-weight: 100;
    color: #6a6a6a;
  }
  button {
    width: 8.5rem;
    height: 3.5rem;
    border: 0;
    background-color: @theme-color;
    color: #fff;
    border-radius: 0.5rem;
  }
}
</style>
